import 'package:flutter/material.dart';
/**
 * 环境搭建
 * 1.基于android studio环境搭建
 *    1.1安装jdk1.8
 *        jdk环境变量：
 *        系统变量  新增 JAVA_HOME， 值为java sdk 根目录（C:\Program Files\Java\jdk1.8.0_361）
 *        系统变量  Path 增加    %JAVA_HOME%\bin
 *        系统变量  Path 增加    %JAVA_HOME%\jre\bin
 *
 *    1.2 安装android studio
 *        android studio安装插件： dart,  Flutter,
 *
 *    1.3 安装Flutter SDK（https://flutter.dev/   官网下载sdk压缩包解压）
 *        Flutter环境变量：
 *        系统变量  Path 增加 flutter sdk bin目录(D:\flutterSdk\flutter_windows_3.7.7-stable\flutter\bin)
 *        Flutter国内镜像配置：
 *        系统变量  新增 FLUTTER_STORAGE_BASE_URL ，值为 https://storage.flutter-io.cn
 *        系统变量  新增 PUB_HOSTED_URL ，值为 https://pub.flutter-io.cn
 *
 *     android studio新建项目时选择flutter_sdk路径为sdk根目录(D:\flutterSdk\flutter_windows_3.7.7-stable\flutter )
 */


/********************************************************************
 ********************************************************************
 * *******************************************************************
 **************************************************************/


/**
 * flutter终端操作命令
 *
 *   flutter doctor      检查flutter环境是否正常
 *   flutter devices        查看找到的所有设备
 *   flutter run -d all 在所有找到的设备上运行
 *   flutter run -d 设备名 在指定设备名设备上运行
 *   o 切换不同类型平台的预览模式
 *   r 改了代码后用来热加载
 *   R 热重启项目
 *   p 显示布局网格
 *   q 退出预览模式
 */


/**
 * flutter修改android端包名
 * 1.android/app/src/main/AndroidManifest.xml 文件,修改新包名
 *    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
        package="com.example.newpackage">
 * 2.android/app/build.gradle 文件，找到并修改 applicationId
 * 3.修改MainActivity.java文件内导包语句  package com.example.newpackage;
 *
 */



 /***************************************************************/
 flutter国际化时配置
 runApp(MaterialApp(
 .....
 runApp(MaterialApp(
 locale: Locale(LanguageUtils.getLanguageType()),
        supportedLocales: const [
          Locale('en'), //
          Locale('zh'), //
          // 添加其他支持的语言环境
        ],
        localizationsDelegates: const [//光一个S.delegate是不够的，后面会找不到Material，弹框什么都会有问题
          S.delegate,
          //下面几个类需要手动导包，自动导包找不到，import 'package:flutter_localizations/flutter_localizations.dart';
          GlobalMaterialLocalizations.delegate,
          GlobalCupertinoLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
        ],
 )
 /***************************************************************/



example_code() {
  //常用容器
  Container(
    //内容偏向
      alignment: Alignment.bottomRight,

      decoration: BoxDecoration( //容器外观
        //背景色
          color: Colors.white,
          //边框--颜色,宽度
          border: Border.all(color: Colors.black, width: 5),
          //设置边框形状，枚举圆形，矩形
          boxShadow: const [BoxShadow(color: Colors.red, blurRadius: 10.0)],
          //阴影--颜色，阴影厚度
          shape: BoxShape.circle,
          //圆角
          borderRadius: const BorderRadius.all(Radius.circular(50)),

          image: const DecorationImage( //容器图片
              fit: BoxFit.cover,
              image: NetworkImage("https://......")
          )
      ),
      width: 100,
      height: 100,
      margin: EdgeInsets.all(15.0),
      padding: EdgeInsets.all(15.0),
      //旋转、缩放、平移等变换
      transform: Matrix4.rotationZ(0.2),

      child: null
  );


  //椭圆或圆形容器，超出部分被裁剪 ,如果要实现正圆形边框，可以套Container，然后要实现椭圆形边框，需要套CustomPainter
  ClipOval(
      child: Image.asset(
        "images/img_test.png",
        width: 100,
        height: 150,
        fit: BoxFit.cover,
      )
  );

  //简单的正圆形图片，要带边框可以两个做嵌套
  CircleAvatar(
    radius: 50, //圆形图片的半径
    backgroundImage: NetworkImage(
        "https://www.itying.com/images/flutter/2.png"),
  );

  SizedBox(width: 100, height: 100, child: null);
  Padding(padding: EdgeInsets.all(10), child: null);

  Align( //用来包裹一个child，控制其与父容器的布局关系 Center的父布局
    //偏移量为：子布局从中心点移动到父布局边缘的距离*系数，也可以是Alignment.centerLeft等
    alignment: Alignment(1, 0.3),
    child: null,
  );

  Container(
    width: 200,
    color: Colors.yellow,
    child: AspectRatio( //用来包裹一个child,控制其宽高比
      //最终可能不会根据这个值去布局，具体则要看综合因素，外层是否允许按照这种比率进行布局，这只是一个参考值
      aspectRatio: 2 / 1,
      child: Container(
          color: Colors.blue
      ),
    ),
  );

  Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween, //主方向分布规则
    crossAxisAlignment: CrossAxisAlignment.start, //副方向分布规则
    children: [],
  );

  Column(
    mainAxisAlignment: MainAxisAlignment.spaceBetween, //主方向分布规则
    crossAxisAlignment: CrossAxisAlignment.start, //副方向分布规则
    children: [],
  );

  Wrap( //排不下自动排版到下一行的组件
    spacing: 20,
    runSpacing: 10,
    children: [],
  );
  //弹性布局 Flex  Row和Column的父类,可以支持item的权重
  Flex(
    direction: Axis.horizontal,
    children: [
      Expanded(flex: 2, child: Container()),
      Expanded(flex: 1, child: Container()),
    ],
  );


  /**************************************   ListView   *************************************************
   *******************************************************************************************************/
  //ListView三种创建方式
  //1.直接写死的项
  ListView(
    scrollDirection: Axis.vertical, //滚动方向
    padding: EdgeInsets.all(10.0), //内边距
    resolve: false, //是否反序
    children: [],
  );
  //2.动态创建
  ListView.builder(
      itemCount: 10,
      itemBuilder: (context, index) {
        return ListTile(title: 'item_$index',);
      }
  );
  //3.动态创建带分割线的
  ListView.separated(
      itemCount: 10,
      itemBuilder: (context, index) { //item视图
        return ListTile(title: 'item_$index',);
      },
      separatorBuilder: (context, index) { //分割线
        return Divider();
      }
  );


  /*******************   GridView   ***********************************************************************
   *******************************************************************************************************/
  /**
   * GridView常用属性：
   *    scrollDirection: Axis.vertical,//滚动方向
   *    padding: EdgeInsets.all(10.0), //内边距
   *    resolve: false,//是否反序
   *    mainAxisSpacing:5,//item主方向间距
   *    crossAxisSpacing:5,//item负方向间距
   *
   */
  //GridView三种创建方式
  //1.按每行item数量创建
  GridView.count(
      crossAxisCount: 3, //每行item数量
      childAspectRatio: 2 / 3, //指定item的宽高比
      children < Widget > []
  );
  //2.按item主方向最大尺寸
  GridView.extent(
      maxCrossAxisExtent: 80, //item主方向最大尺寸
      childAspectRatio: 2 / 3, //指定item的宽高比
      children < Widget > []
  );
  //3.GridView.builder
  GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( //网格布局控制
        crossAxisSpacing: 10.0, //主方向item间距
        mainAxisSpacing: 10.0, //次方向item间距
        childAspectRatio: 2 / 3, //指定item的宽高比
        crossAxisCount: 3, //一行的 Widget 数量(二选一)
        //mainAxisExtent: 80,//item主方向最大尺寸(二选一)

      ),
      itemCount: 10,
      itemBuilder: (context, index) { //item视图
        return ListTile(title: 'item_$index',);
      }
  );


  /**********     Stack    *********************************************************************************
   *******************************************************************************************************/

  //Stack 堆布局，类似相对布局，结合 Align 和 Positioned 控制子布局位置
  Container(
      height: 300,
      width: 300,
      child: Stack(
        children: [
          //按比例放置
          Align(
            //用来包裹一个child，控制其与父容器的布局关系
            alignment: Alignment(0.5, -1), //相对父容器的偏移
            child: Container(
              width: 10,
              height: 10,
              decoration: BoxDecoration(color: Colors.red),
            ),
          ),
          //按坐标放置
          Positioned(
            top: 10,
            left: 10,
            width: 100,
            height: 100,
            child: Container(
              color: Colors.yellow,
            ),
          )

        ],
      )
  );

  /*******************
   * TabBar
   * TabBarView
   * 组件 with SingleTickerProviderStateMixin 内 实现 TabController 关联
   *
   *   late TabController controller;
   *
   *    @override
   *    void initState() {
   *      super.initState();
   *      controller = TabController(length: 3, vsync: this);
   *    }
   *
   * ********************************
   * ***********************************************************************
   */

  //常用组件
  Text(
    textAlign: TextAlign.center,
    //文字对齐偏向
    textDirection: TextDirection.ltr,
    //文字方向（从左到右写，从右到左写）
    overflow: TextOverflow.ellipsis,
    //文字写不下时的处理方式
    textScaleFactor: 1,
    //字体显示缩放倍率
    style: TextStyle(
      fontSize: 20,
      color: Colors.white,
      fontStyle: FontStyle.italic,
      //字体样式：italic斜体，normal正常体
      fontWeight: FontWeight.bold,
      //字体粗细 bold粗体，normal正常体
      wordSpacing: 6,
      //单词间隙
      letterSpacing: 3,
      //字母间隙
      decoration: TextDecoration.underline,
      //文字装饰线  none没有线，lineThrough删除线，overline上划线，underline下划线
      decorationColor: Colors.yellow,
      //文字装饰线颜色
      decorationStyle: TextDecorationStyle
          .dashed, //文字装饰线风格[dashed,dotted]虚线，double两根线，solid一根实线，wavy波浪线
    ),
  );


  Image.network("https://..........",
    alignment: Alignment.center,
    //内容偏向
    color: Colors.white,
    //背景色
    colorBlendMode: BlendMode.srcOver,
    //设置图片像素与背景颜色之间的混合模式:BlendMode.srcOver：默认值，图片像素颜色绘制在背景上,
    // .srcIn颜色相交,.srcOut颜色相除,.screen颜色混合，.multiply颜色相乘，.colorBurn颜色加深，.colorDodge颜色减淡
    fit: BoxFit.cover,
    //.cover原比充满(无空隙) .contain原比充满(有空隙)  .fill:拉伸  .fitWidth .fitHeight
    repeat: ImageRepeat.repeatX,
    //平铺方式
    width: 100,
    height: 100,
  );

  Icon(Icons.search, color: Colors.red, size: 40);


  ListTile(
    leading: null, //左边视图
    trailing: null, //右边视图
    title: null, //中间主标题
    subtitle: null, //中间副标题
  );

  //分割线,它放方向取决于父容器容器的方向
  Divider();

  /**
   * //Scaffold属性
   *
   * Scaffold(
      floatingActionButton: FloatingActionButton(..), //悬浮圆形按钮，可以用Container包裹控制大小等
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, // 悬浮圆形按钮的摆放位置
      bottomNavigationBar: BottomNavigationBar(//底部导航栏
        currentIndex: 2,//当前选中第几项
        type: BottomNavigationBarType.fixed,//超过3项要设置这个才能正常显示
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "1111"),
          BottomNavigationBarItem(icon: Icon(Icons.list), label: "2222")
        ],
      );
   */




  /********************    Button   ************************************
   * ************************************************************************
   */

// 按钮不带图标 xxxButton(child:Text('...'))
// 按钮带图标 xxxButton.icon(icon: Icon(...),label: Text('...'))
  ElevatedButton(); //带背景色按钮
  TextButton(); //不带背景色按钮
  OutlinedButton(); //带边框按钮
  IconButton(); //只有一个Icon的按钮

  /****************************  按钮样式设置示例   ******************************************/
  /**
   * style: ButtonStyle(
      backgroundColor: MaterialStateProperty.all(Colors.blueGrey), //背景色
      foregroundColor: MaterialStateProperty.all(Colors.white),   //前景色 （icon和文字颜色）
      side: MaterialStateProperty.all(const BorderSide(color: Colors.red, width: 3)),//边框
      shape: MaterialStateProperty.all(//圆角大小
      const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20)))
      ),
      ),
   */


  /***********************************************************************
   * ************************************************************************
   */
//获取屏幕尺寸
  var size = MediaQuery
      .of(context)
      .size;
}
